import React, { useRef } from "react";
import { Button, Page, Table, Title } from "@/components";
import { ActionType, ColumnType } from "@/components/Table/interface";
import ScrollIntoView from "@/doc/components/ScrollIntoView";

type TableDataType = {
  index?: string,
  id: string,
  col1: string,
  col2: string,
}
const IconExemple = () => {
  const data: TableDataType[] = [
    {
      id: 'id001',
      col1: 'col1-row1',
      col2: 'col2-row1',
    },
    {
      id: 'id002',
      col1: 'col1-row2',
      col2: 'col2-row2',
    },
  ]

  const columns: ColumnType<TableDataType>[] = [
    {
      title: 'col1',
      dataKey: 'col1',
      width: '200'
    },
    {
      title: 'col2',
      dataKey: 'col2',
    },
  ]

  const actionRef = useRef<ActionType>()
  return (
    <Page
      pageHeader={{
        title: '表格 Table',
        descriptions: '用于数据收集展示、分析整理、操作处理。',
        breadcrumb: {
          list: [
            {
              title: 'CompCards',
              path: '/compCards'
            },
            {
              title: 'TableExemple',
              path: '/exemples/tableExemple'
            }
          ]
        }
      }}
    >
      <ScrollIntoView>
        <Title type="tooltip" title="基本Table" >
          <Table<{
            data1: string,
            data2: string,
            data3: string,
            data4: string,
          }>
            columns={[
              {
                title: 'title1',
                dataKey: 'data1',
                headerCellRender(col, index) {
                  return (
                    <>
                      {col.title}
                      headerCellRender
                      {index}
                    </>
                  )
                },
                bodyCellRender(col, record, { dataIndex }) {
                  return (
                    <div>
                      {record?.[col.dataKey]}
                      bodyCellRender
                      {dataIndex}
                    </div>
                  )
                },
              },
              {
                title: 'title2',
                dataKey: 'data2',
              },
              {
                title: 'align-right',
                dataKey: 'data3',
                align: "center"
              },
              {
                title: 'placeholder',
                dataKey: 'data4',
                align: "right"
              },
            ]}
            onRow={(record) => {
              return {
                onClick: () => {
                  console.log('onRow', record);
                }
              }
            }}
            placeholder='---'
            data={[
              {
                data1: 'data',
                data2: 'data',
                data3: 'data',
                data4: 'data',
              },
              {
                data1: 'data',
                data2: 'data',
                data3: 'data',
                data4: '',
              },
            ]}
          />
        </Title>
        <Title type="tooltip" title="自定义单元格" description="onTbodyTdCell onTbodyTdCell" >
          <Table<TableDataType>
            columns={columns}
            data={data}
          />
        </Title>
        <Title type="tooltip" title="列宽度" >
          <Table<TableDataType>
            borders={{
              vertical: true,
            }}
            borderWidth={4}
            columns={columns}
            data={data}
          />
        </Title>
        <Title type="tooltip" title="分页 pagination" >
          <Table<TableDataType>
            columns={columns}
            data={data}
            pagination={{
              sort: ['total', 'page'],
              total: 200
            }}
          />
        </Title>
        <Title type="tooltip" title="多选 checked" >
          <Table
            actionRef={actionRef}
            columns={[
              {
                checked: true,
                dataKey: 'id',
              },
              ...columns,
            ]}
            data={async (pagination, search) => {
              const list: any[] = []
              for (let index = 0; index < pagination.pageSize; index++) {
                const num = (pagination.current - 1) * pagination.pageSize + index + 1
                list.push({
                  id: `id${index + 1}--${num}`,
                  col1: `col1-row${index + 1}--${num}`,
                  col2: `col2-row${index + 1}--${num}`,
                })
              }
              return {
                list,
                total: 20,
              }
            }}
            pagination={{
              sort: ['total', 'page'],
              hideOnSinglePage: true
            }}
          />
        </Title>
        <Title type="tooltip" title="索引 index" >
          <Table
            actionRef={actionRef}
            columns={[
              {
                index: true,
                dataKey: 'index',
              },
              ...columns,
            ]}
            data={async (pagination, search) => {
              const list: any[] = []
              for (let index = 0; index < pagination.pageSize; index++) {
                const num = (pagination.current - 1) * pagination.pageSize + index + 1
                list.push({
                  col1: `col1-row${index + 1}--${num}`,
                  col2: `col2-row${index + 1}--${num}`,
                })
              }
              return {
                list,
                total: 20,
              }
            }}
            pagination={{
              sort: ['total', 'page'],
              hideOnSinglePage: true
            }}
          />
        </Title>
        <Title type="tooltip" title="搜索" >
          <Table
            search={{
              columns: [
                {
                  formItem: {
                    name: 'text',
                    label: 'lableTxet'
                  },
                  type: 'text'
                },
                {
                  formItem: {
                    name: 'number',
                    label: 'lableNumber'
                  },
                  type: 'number'
                }
              ]
            }}
            actionRef={actionRef}
            columns={[
              {
                index: true,
                dataKey: 'index',
              },
              ...columns,
            ]}
            data={async (pagination, search) => {
              const list: any[] = []
              for (let index = 0; index < pagination.pageSize; index++) {
                const num = (pagination.current - 1) * pagination.pageSize + index + 1
                list.push({
                  col1: `col1-row${index + 1}--${num}`,
                  col2: `col2-row${index + 1}--${num}`,
                })
              }
              return {
                list,
                total: 20,
              }
            }}
            pagination={{
              sort: ['total', 'page'],
              hideOnSinglePage: true
            }}
          />
        </Title>
      </ScrollIntoView>
    </Page>
  )
}
export default IconExemple